<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">

<body data-type="index" class="theme-white">

    <div class="am-g tpl-g">
        <!-- 头部 -->
        <jsp:include page="common/header.jsp"></jsp:include>
        <!-- 风格切换 -->
        
        <!-- 侧边导航栏 -->
        <jsp:include page="common/left.jsp"></jsp:include>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div class="row  am-cf">
                    
                    <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">流水操作</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">

                                <form class="am-form tpl-form-line-form">


                                <div class="am-form-group">
                                        <label for="user-phone" class="am-u-sm-3 am-form-label">银行卡 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <select id="cardSelect" >
                                            </select>
                                            <button type="button" class="am-btn am-btn-default am-radius" onclick="queryFirstFlow();">查询</button>
                                            <button type="button" class="am-btn am-btn-default am-radius" onclick="downLoad();">下载</button>
                                        </div>

                                    </div>

                                    <div class="am-form-group">
                                        <label for="pwd" class="am-u-sm-3 am-form-label">密码 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="password" class="tpl-form-input" id="pwd" placeholder="请输入6位银行卡密码">
                                            <small></small>
                                        </div>
                                    </div>
                                </form>

                                <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl"></div>
                                <div class="widget-function am-fr">
                                   
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>卡号</th>
                                            <th>金额</th>
                                            <th>备注</th>
                                            <th>时间</th>
                                        </tr>
                                    </thead>
                                    <tbody id="flowDiv">
                                    </tbody>
                                </table>

                                <ul class="am-pagination">
                                  <li><a href="###" onclick="first();">首页 &raquo;</a></li>
								  <li><a href="###" onclick="pre();">&laquo; 上一页</a></li>
								  <li><a href="###" onclick="next();">下一页 &raquo;</a></li>
								  <li><a href="###" onclick="last();">尾页 &raquo;</a></li>
								 <li id="pageNumDiv"></li>
								</ul>



                            </div>
                        </div>



                            </div>

                        </div>
                    </div>
                </div>

        

                    
                    
                </div>

               

 
                </div>



            </div>
        </div>
    </div>
    </div>

<script>

    var currentPage = 1;
    var totalPage = 0;

    $(document).ready(function () {
        $('.sidebar-nav-link a').removeClass('active');
        $('#flowMenu').addClass('active');
        listCards();
    });

    function first() {
        currentPage = 1;
        queryFlow();
    }

    function last() {
        currentPage = totalPage;
        queryFlow();
    }

    function pre() {
        if (currentPage <= 1) {
            return;
        }

        currentPage --;
        queryFlow();
    }
    
    function next() {
        if (currentPage >= totalPage) {
            return;
        }

        currentPage ++;
        queryFlow();
    }

    function queryFirstFlow() {
        currentPage = 1;
        queryFlow();
    }

    function downLoad() {
        window.location.href="/card/downFlow.do?cardNum="+ $('#cardSelect').val() +"&pwd=" + $('#pwd').val();
    }

    function queryFlow() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/card/getFlows.do',
            data: {
                cardNum : $('#cardSelect').val(),
                pwd : $('#pwd').val(),
                currentPage : currentPage
            },
            success: function (dataResult) {
                if (1000 !== dataResult.code) {
                    alert(dataResult.message);
                    return false;
                }

                let pageHolder =  dataResult.data;
                let resutls = pageHolder.data;
                let msg = '';
                for (let i=0; i<resutls.length; i++) {
                    msg += '<tr class="gradeX">';
                    msg += '<td>'+resutls[i].cardNum+'</td>';
                    msg += '<td>'+resutls[i].amount+'</td>';
                    msg += '<td>'+resutls[i].desc+'</td>';
                    msg += '<td>'+resutls[i].createTime+'</td>';
                    msg += '</tr>';
                }

                totalPage = pageHolder.totalPage;
                $('#pageNumDiv').html(currentPage + '/' + totalPage);
                $('#flowDiv').html(msg);
            },
            error: function (XMLHttpResponse) {
            }
        });
    }

    function listCards() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/card/getBankCards.do',
            data: {
            },
            success: function (dataResult) {
                if (1000 !== dataResult.code) {
                    alert(dataResult.message);
                    return false;
                }

                let resutls = dataResult.data;
                let msg = '';
                for (let i=0; i<resutls.length; i++) {
                    msg += '<option value="'+resutls[i].cardNum+'">'+resutls[i].cardNum+'</option>';
                }

                $('#cardSelect').html(msg);

            },
            error: function (XMLHttpResponse) {
            }
        });
    }
</script>

</body>

</html>